import { ReactNode } from 'react'
import { Button } from './ui/button'
import { Sheet, SheetContent, SheetTrigger } from './ui/sheet'
import { ScrollArea } from './ui/scroll-area'
import { Menu, FileText, Home } from 'lucide-react'
import Link from 'next/link'
import { getAllDocs, type Doc } from '../lib/docs'

interface DocsLayoutProps {
  children: ReactNode
}

export default function DocsLayout({ children }: DocsLayoutProps) {
  const docs = getAllDocs()

  const Sidebar = () => (
    <div className="w-64 border-r bg-gray-50/40 dark:bg-gray-900/40">
      <div className="p-6">
        <h2 className="text-lg font-semibold mb-4">文档导航</h2>
        <nav className="space-y-2">
          <Link 
            href="/" 
            className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          >
            <Home className="h-4 w-4" />
            首页
          </Link>
          {docs.map((doc: Doc) => (
            <Link
              key={doc.slug}
              href={`/docs/${doc.slug}`}
              className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            >
              <FileText className="h-4 w-4" />
              {(doc.meta.title as string) || doc.slug}
            </Link>
          ))}
        </nav>
      </div>
    </div>
  )

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-14 items-center">
          <div className="mr-4 hidden md:flex">
            <Link href="/" className="mr-6 flex items-center space-x-2">
              <span className="hidden font-bold sm:inline-block">
                文档网站
              </span>
            </Link>
          </div>
          
          {/* Mobile menu */}
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="md:hidden">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="w-64 p-0">
              <ScrollArea className="h-full">
                <Sidebar />
              </ScrollArea>
            </SheetContent>
          </Sheet>

          <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
            <div className="w-full flex-1 md:w-auto md:flex-none">
              <Link href="/" className="font-bold md:hidden">
                文档网站
              </Link>
            </div>
          </div>
        </div>
      </header>

      <div className="flex">
        {/* Desktop sidebar */}
        <aside className="hidden md:block">
          <Sidebar />
        </aside>

        {/* Main content */}
        <main className="flex-1">
          <div className="container py-6 lg:py-10">
            <div className="mx-auto max-w-3xl">
              {children}
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}